<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select
            filterable
            placeholder="一级类别"
            v-model="formInline.first_type"
            @change="second_type"
            style="width:100px;"
          >
            <el-option
              v-for="item in first_type_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            filterable
            placeholder="二级类别"
            v-model="formInline.second_type"
            style="width:100px;"
          >
            <el-option
              v-for="item in second_type_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.accessories_id"
            placeholder="请输入配件编号/名称"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="80">
          <template slot-scope="scope">
            <vue-preview class="preview" :slides="scope.row.imgList"></vue-preview>
          </template>
        </el-table-column>
        <el-table-column align="center" label="配件名称" prop="name"></el-table-column>
        <el-table-column align="center" label="配件编号" prop="id"></el-table-column>
        <el-table-column align="center" label="神采配件编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="类别" prop="type_name"></el-table-column>
        <el-table-column align="center" label="成本价" prop="money_cost"></el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getList,
  getPage,
  getSizeList,
  get_type,
} from "@/api/information/pj_info";
export default {
  data() {
    return {
      machineInfo: "",
      list: null,
      first_type_list: null,
      second_type_list: null,
      type_list: null,
      listLoading: false,
      currentPage: 1,
      totalDataNumber: 0,
      sizeList: "",
      formInline: {
        size: "",
        first_type: "",
        second_type: "",
        type: "",
        accessories_id: "",
        category_id: 20,
      },
    };
  },
  created() {
    this.first_type();
    this.searchClick();
  },
  methods: {
    // 搜索
    searchClick() {
      this.fetchData();
      // this.getSize();
    },
    first_type() {
      get_type({ id: 0 }).then((response) => {
        this.first_type_list = response;
      });
    },
    second_type(id) {
      this.formInline.second_type = "";
      this.formInline.type = "";
      get_type({ id: id }).then((response) => {
        this.second_type_list = response;
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then((response) => {
          this.totalDataNumber = response * 20;
          getList(this.formInline).then((response) => {
            response.forEach(function (val, i) {
              val.money_cost = ((val.money_cost * 1) / 1000000).toFixed(2);
              val.imgList = [
                {
                  src: val.img,
                  msrc: val.thumb,
                  w: 1200,
                  h: 900,
                },
              ];
            });
            this.list = response;
            this.listLoading = false;
          });
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then((response) => {
        response.forEach(function (val, i) {
          val.money_cost = ((val.money_cost * 1) / 1000000).toFixed(2);
          val.imgList = [
            {
              src: val.img,
              msrc: val.thumb,
              w: 1200,
              h: 900,
            },
          ];
        });
        this.list = response;
        this.listLoading = false;
      });
    },
  },
};
</script>